import React, {useMemo} from 'react'
import {mdiDelete} from '@mdi/js'
import ButtonIcon from '../icon/ButtonIcon'
import {COLORS} from '../color'

interface CircleProgressBarProps {
  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
  className?: string
  percent: number
  renderValue?: React.ReactNode
  isCancelIcon?: boolean
  isIconDelete?: boolean
  onDelete?: () => void
  onStop?: () => void
}

const CircleProgressBar: React.FC<CircleProgressBarProps> = ({
  size,
  percent,
  renderValue,
  className,
  isCancelIcon,
  isIconDelete,
  onDelete,
  onStop,
}): React.ReactElement => {
  const selectSize = size ? size : 'l'

  const getRightPercent = useMemo(() => {
    if (percent <= 50) {
      const degRight = percent * 3.6
      return {transform: `rotate(${degRight}deg)`}
    } else {
      return {transform: `rotate(180deg)`}
    }
  }, [percent])

  const getLeftPercent = useMemo(() => {
    if (percent > 50 && percent <= 100) {
      const deg: number = (percent - 50) * 3.6
      return {transform: `rotate(${deg}deg)`}
    } else if (percent > 100) {
      return {transform: `rotate(180deg)`}
    }
  }, [percent])
  return (
    <div className={className ? className : ''}>
      <div className={'circular-progress-bar ' + selectSize}>
        <div className={'inner ' + selectSize} />
        <div className={'numb ' + (isCancelIcon ? ' cancellable ' : '') + selectSize}>
          <span className={'percent'}>{size !== 's' ? renderValue || percent : ''}</span>
          <span className={'cancel-icon'}>
            {isCancelIcon && (
              <>
                {isIconDelete ? (
                  <ButtonIcon
                    iconPath={mdiDelete}
                    color={COLORS.red}
                    size={'sm'}
                    hoverIconColor={'danger'}
                    title={'Удалить'}
                    onClick={onDelete}
                  />
                ) : (
                  <ButtonIcon
                    iconPath={mdiDelete}
                    color={COLORS.red}
                    size={'sm'}
                    hoverIconColor={'danger'}
                    title={'Приостановить'}
                    onClick={onStop}
                  />
                )}
              </>
            )}
          </span>
        </div>
        <div className={'circle'}>
          <div className={'bar right ' + selectSize}>
            <div className={'progress ' + selectSize} style={getRightPercent} />
          </div>
          <div className={'bar left ' + selectSize}>
            <div className={'progress ' + selectSize} style={getLeftPercent} />
          </div>
        </div>
      </div>
    </div>
  )
}

export {CircleProgressBar}
